import React from "react";
import ReactDOM from "react-dom";

// 组件的生命周期
// 创建时期

class App extends React.Component{
    // （1）最先执行,类似构造函数,可用于做初始化
    constructor(props){
        super(props)
        this.state = {
            count: 0
        }
        console.warn('生命周期钩子函数: constructor')
    }

    // （3）render执行完,马上执行
    // 进行dom操作
    // 发送ajax请求,获取数据
    componentDidMount(){
        const title = document.getElementById('title')
        console.log(title)
        console.warn('生命周期钩子函数: componentDidMount')
    }

    // （2）渲染ui
    render () {
        console.warn('生命周期钩子函数: render')
        return (
            <div>
                <h1 id="title">统计打豆豆的次数:</h1>
                <button id='btn'>大大大</button>
            </div>
        )
        
    }
}

ReactDOM.render(<App />, document.getElementById('root'))